<template>
	<view class="container">
		<view v-if="!loading">
			<uv-swiper :list="details.list" indicator indicatorMode="line" height="1000rpx"
				@click="previewImage"></uv-swiper>
			<view class="content">{{details.content}}</view>
		</view>
		<view class="button-fb-box">
			<view class="button-fb" @click="onSubmit">发布</view>
		</view>
		<uv-popup ref="popup" bgColor="none">
			<view class="pop-box-1">
				<image class="top-image"
					src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/26/5bd2f1da01a14b71b13296587d26825c.png"
					mode="aspectFill"></image>
				<view class="pop-box">
					<view class="title1">是否确认发布 </view>
					<view class="title2">视频/种草内容到{{text}}吗?</view>
					<view class="button" @tap.stop.prevent="submit">确定</view>
				</view>
			</view>
		</uv-popup>
		<uv-loading-page :loading="loading" loading-mode="spinner"></uv-loading-page>
	</view>
</template>

<script>
	import {
		getIsCommentInfo
	} from '@/common/api.js'

	import parame from "@/utils/mobile.js"
	import AppOpener from "@/utils/openApp";
	const mobile = parame.parame
	const app = getApp();
	export default {
		data() {
			return {
				type: '',
				loading: false,
				text: '',
				details: {
					list: [],
					content: '',
					merchantLinkUrl: ''
				},
			}
		},
		onLoad(e) {
			this.type = e.type
			this.text = e.type == 'meituan' ? '美团' : e.type == 'dianping' ? '大众点评' : e.type == 'gaode' ? '高德地图' : '微信'
			this.getData(e.id)
		},

		methods: {
			getData(id) {
				this.loading = true
				let channelId = this.type == 'meituan' ? 4 : this.type == 'dianping' ? 5 : this.type == 'weixin' ? 10 : 6
				getIsCommentInfo({
					id,
					channelId
				}).then(res => {
					this.details.list = JSON.parse(res.data.commentUrl)
					this.details.content = res.data.commentContent
					this.details.merchantLinkUrl = channelId == 10 ? 'weixin://' : res.data.merchantLinkUrl
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			onSubmit() {
				this.$refs.popup.open();
			},
			async submit() {
				if (this.details.merchantLinkUrl) {
					uni.showLoading({
						title: '正在唤起应用',
						mask: true
					});
					const ios_store = mobile.ios[this.type]
					const android_store = mobile.android[this.type]
					// const AppRouter = new openApp({
					// 	scheme: this.details.merchantLinkUrl,
					// 	ios: ios_store,
					// 	package: android_store,
					// })
					// AppRouter.open(() => {
					// 	uni.hideLoading();
					// }, () => {
					// 	uni.hideLoading();
					// })
					const router = new AppOpener({
						scheme: this.details.merchantLinkUrl,
						ios: ios_store,
						package: android_store,
					});
					try {
						await router.open();
						uni.hideLoading();
					} catch (error) {
						uni.hideLoading();
						console.log("打开失败:", error);
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '暂未配置商户链接',
						showCancel: false
					})
				}
				this.$refs.popup.close();
			},
			previewImage(index) {
				uni.previewImage({
					current: this.details.list[index],
					showmenu: true,
					urls: this.details.list
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 60rpx;
	}

	.container {
		padding-bottom: calc(32rpx + 96rpx + 10rpx);
	}

	.button-fb-box {
		position: fixed;
		bottom: 32rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;

		.button-fb {
			width: 480rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.button-fb-s {
			width: 326rpx;
			height: 96rpx;
			border: 2rpx solid #4635FF;
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #4635FF;
			line-height: 96rpx;
			text-align: center;
			margin-right: 20rpx;
		}
	}

	.pop-box-1 {
		position: relative;
		padding-top: 150rpx;

		.top-image {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 282rpx;
			height: 284rpx;
		}
	}

	.pop-box {
		width: 614rpx;
		height: 528rpx;
		background: #FFFFFF;
		border-radius: 80rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		padding-top: 160rpx;
		box-sizing: border-box;

		.title1 {
			margin-bottom: 20rpx;
		}

		.title2 {
			margin-bottom: 40rpx;
		}

		.button {
			width: 392rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 80rpx 80rpx 80rpx 80rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>